import styles from './styles.less';
import {Button, Col, DatePicker, Form, Input, Row, Select} from 'antd';
import 'dayjs/locale/zh-cn';
import {connect} from 'umi';
import {filterValues} from '@/utils/utils';
import locale from "antd/es/date-picker/locale/zh_CN";
import {useState} from "react";
import {DownOutlined, UpOutlined} from "@ant-design/icons";

const {RangePicker} = DatePicker;

const SearchForm = (props) => {

  const {submitting} = props;
  const {setTablePayload, tablePayload} = props.data;
  const [form] = Form.useForm();
  const [expand, setExpand] = useState(false);

  /* 搜索提交 */
  const onFinish = (values) => {
    setTablePayload({...tablePayload, pageNum: 1, param: {...filterValues(values)}});
  };

  /* 搜索重置 */
  const onReset = () => {
    form.resetFields();
    setTablePayload({...tablePayload, pageNum: 1, param: {}});
  };

  return (
    <Form form={form} labelCol={{span: 6}} className={styles.mySearchForm} onFinish={onFinish}>
      {!expand ? (
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item name={`mobile`} label={`客户手机`}>
                <Input placeholder='请输入客户手机'/>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name={`status`} label={`当前状态`}>
                <Select placeholder='请选择当前状态'>
                  <Select.Option value={'0'}>未使用</Select.Option>
                  <Select.Option value={'1'}>已使用</Select.Option>
                  <Select.Option value={'2'}>已过期</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8} style={{textAlign: 'right'}}>
              <Button type='primary' htmlType='submit' loading={submitting}>
                查询
              </Button>
              <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
                重置
              </Button>
              <a style={{fontSize: 12}} onClick={() => setExpand(!expand)}>
                <DownOutlined/> 展开
              </a>
            </Col>
          </Row>
      ) : (
          <>
            <Row gutter={24}>
              <Col span={8}>
                <Form.Item name={`mobile`} label={`用户手机`}>
                  <Input placeholder='请输入用户手机'/>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name={`status`} label={`当前状态`}>
                  <Select placeholder='请选择当前状态'>
                    <Select.Option value={'0'}>未使用</Select.Option>
                    <Select.Option value={'1'}>已使用</Select.Option>
                    <Select.Option value={'2'}>已过期</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name={`dateRange`} label={`领取时间`}>
                  <RangePicker locale={locale} style={{width: '100%'}} format={'YYYY-MM-DD'}/>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={64} style={{marginTop: '16px'}}>
              <Col span={24} style={{textAlign: 'right'}}>
                <Button type='primary' htmlType='submit' loading={submitting}>
                  查询
                </Button>
                <Button style={{margin: '0 8px'}} onClick={() => onReset()}>
                  重置
                </Button>
                <a style={{fontSize: 12}} onClick={() => setExpand(!expand)}>
                  <UpOutlined/> 收起
                </a>
              </Col>
            </Row>
          </>
      )}





    </Form>
  );
};

export default connect(({loading}) => {
  return {
    submitting: loading.effects['POperationCouponRecord/fetchLinkRecord'],
  };
})(SearchForm);
